<template>
  <div class="health-records">
    <h2>健康记录</h2>
    
    <!-- 添加新记录表单 -->
    <div class="add-record-form">
      <h3>添加新记录</h3>
      <form @submit.prevent="submitRecord">
        <div class="form-group">
          <label>记录日期：</label>
          <input type="date" v-model="newRecord.recordDate" required>
        </div>
        
        <div class="form-group">
          <label>症状描述：</label>
          <textarea v-model="newRecord.symptoms" required></textarea>
        </div>
        
        <div class="form-group">
          <label>治疗措施：</label>
          <textarea v-model="newRecord.treatment" required></textarea>
        </div>
        
        <button type="submit">添加记录</button>
      </form>
    </div>

    <!-- 记录列表 -->
    <div class="records-list">
      <h3>历史记录</h3>
      <table v-if="records.length">
        <thead>
          <tr>
            <th>日期</th>
            <th>症状</th>
            <th>治疗措施</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in records" :key="record._id">
            <td>{{ formatDate(record.recordDate) }}</td>
            <td>{{ record.symptoms }}</td>
            <td>{{ record.treatment }}</td>
          </tr>
        </tbody>
      </table>
      <p v-else>暂无健康记录</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HealthRecords',
  props: {
    residentId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      records: [],
      newRecord: {
        recordDate: '',
        symptoms: '',
        treatment: ''
      }
    }
  },
  async created() {
    await this.fetchRecords()
  },
  methods: {
    async fetchRecords() {
      try {
        const response = await axios.get(`/api/health-records/${this.residentId}`)
        if (response.data.success) {
          this.records = response.data.data
        } else {
          throw new Error(response.data.message)
        }
      } catch (error) {
        alert(error.response?.data?.message || '获取健康记录失败')
      }
    },
    async submitRecord() {
      try {
        const response = await axios.post('/api/add-health-record', {
          ...this.newRecord,
          residentId: this.residentId
        })
        if (response.data.success) {
          alert('添加记录成功')
          this.resetForm()
          await this.fetchRecords()
        } else {
          throw new Error(response.data.message)
        }
      } catch (error) {
        alert(error.response?.data?.message || '添加记录失败')
      }
    },
    resetForm() {
      this.newRecord = {
        recordDate: '',
        symptoms: '',
        treatment: ''
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.health-records {
  padding: 20px;
}

.add-record-form {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

textarea {
  height: 100px;
  resize: vertical;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style> 